My role:
UX researcher and UI designer in a group project with Brigid Gliwa, Jeremy Gross, and Ted Olney-Bell, all also serving as UX researchers and UI designers.
My deliverables:
1 set of wireframes, 1 set of mockups, 1 InVision protoype, 1 usability test and table of findings
Problem context:
The Massachusetts Bay Transit Authority (MBTA) accepts your proposal to develop a prototype user interface for Charlie™–the MBTA’s next generation mobile application. The release of the app will coincide with enable contactless payment via your Charlie Card,
smartphone, or contactless credit card.
smartphone, or contactless credit card.
Assumptions:
The app will be running on an iPhone XS and provide at least somewhat comparable services pertaining to all types of transportation and public transit.
Goal:
More seamlessly travel conveniently using all the modes of transportation that the MBTA has to offer.
Constraints:
Start by focusing on our three most popular transit options: Subway, Commuter Rail, and Bus.
Conducting user research:
A focus group of people in Somerville, MA who rely on the MBTA for transportation on a regular basis. While most riders expressed overall satisfaction with the transit system, most (4 out of the 5) voiced frustrations regarding the lack of transparency in communications regarding their daily commutes.
Demographics:
1 man, 4 women; aged 20s-60s; 3 White, 1 African-American, 1 Hispanic.
Findings:
- Current app use: Three used the Transit app by the MBTA, while one used the app called Proximity.
- Route planning: For planning trips using the MBTA, the four participants who used apps all stated that they planned trips using Google Maps rather than a phone app. The primary concern was finding the status of their particular bus line – generally for how many minutes until the next bus arrives.
- Notifications: All four app users expressed dissatisfaction with delay notifications, and as such did not enable or make use of these notifications, preferring instead to be informed upon arrival at the bus stop or subway station. One participant had an issue with the sheer number of notifications, the fact that they were rarely relevant to him, and the fact that the information provided was not especially useful (e.g. “The Alewife-bound train is running 5 minutes late”).
- Overview: Many voiced frustrations with the lack of notifications over delays. In using apps, riders received these notifications regarding delays, but were often dissatisfied with the types of notifications and the overall quality of the notifications. Participants also noted that the apps that they used were mostly for finding times for their own, regularly used routes rather than finding ways to get to a new place. All of the participants purchased monthly passes, some through their employers, and rode regularly.
- Who is our user: The consumer audience for the MBTA app would mostly consist of regular riders who are looking for times of their regularly scheduled bus routes.
Original wireframes based on flipboard concept
Feedback on wireframes:
- the only place a flipboard currently exists is South Station
- users would expect a hamburger menu at top left rather than bottom right
- consider using bold to establish a text hierarchy
Consequential changes:
- scrap the flipboard concept
- utilize bold text to establish an hierarchy in information architecture
- move hamburger menu to top left
Mockups based on colors of the MBTA subway lines:
A hamburger menu is available in the top left. In the top right is an icon specifically for updates and notifications on any route that a commuter is on. These icons are consistent throughout the app so that even when a customer is not on the home page, they may easily navigate to other pages/functions.
Upon opening the mobile app, commuter is greeted with six options to navigate. The first option is a Charlie Card center where the user may add value to a Charlie Card, view usage history, buy passes as well as commuter rail tickets. The second option is to plan a trip between two points using the MBTA. "Favorite Routes" allows the user to look at their favorite bus routes, including schedules and tracking via live maps. "Subway" provides relevant alerts related to the MBTA and the deals button connects commuters with discounts from local partners.
Usability testing utilizing prototype via InVision:
The participants of the usability test were given a series of questions regarding their usage of T Finder, including workflows and ease of use. Other questions included UI interactions, including the participant’s perceived meaning of certain icons. Participants were allowed to navigate the draft of the app in order to test both functionality communicative effectiveness of the user interface.
Demographics:
Ages: 19, 25, 33, 40. 3 men, 1 woman. All working professionals except for one college student participant.
Current usage:
One participant used MBTA transportation daily, while three participants only used public transportation a few times a month.
Findings:
- Deals page: Overall, the most confusion in the usability test came from the navigation button “Deals.” Three of the four participants thought that this page would be about deals on cheaper Charlie Card tickets. Only one participant understood that deals were in partnership with surrounding businesses. Two participants also thought to look at the “Deals” when asked how they would add money to their Charlie Card.
- Notification icon: Two participants believed that this icon was for alerts, while another participant thought it was for delays and another participant thought it was for detours. All participants understood that the red bell was for notifications. One participant wanted to know about delays before they selected their mode of transportation.
- Navigation: When asked where they would find out when a bus will arrive at a specific stop, three participants said live maps. The other participant said they would click on the bus icon to find the bus schedule. Three participants said they would use the hamburger navigation to get back to the home screen, while one participant was searching for a home icon.
- Overall, users were pleased with the design and color pattern of T Finder. Early drafts demonstrated success in the usability of the “Plan a Trip” workflow. However, the meaning behind the icons and certain features confused participants.
Changes:
To develop a clearer means of communicating using icons, the notification system was changed to a bell that turned red when new notifications arrive and the deals button was more clearly labeled.
Feedback from clients:
The use of a hamburger menu as well as a home button seemed redundant and the Route Map page seemed to lack appropriate use of real estate by the map being constrained to a box.
Next Steps:
Consolidate navigation to one central, purposeful home navigation and change the Route Map page to a full bleed of the map.
